<template>
  <div class="flex">
    <div class="flex-tu">
      <div class="flex-item-tu2">
        <el-carousel :interval="2000" :width="500" arrow="always"  :height="banH +'px'" >//:height设置自适应高度
          <el-carousel-item v-for="(item,index) in list_img" :key="index">
            <h3>
              <img :src="item.url" alt=""/>
            </h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="flex-item-tu">
        <div class="image-right1">
          <div class="image-right1-1">
            <span>realme Book</span>
            <span>(
                <span>海岛灰 i5 8G+512G</span>
                )</span>
            <div class="image-right1-2">
              <span>¥ </span>
              <span>4299</span>
            </div>

          </div>
        </div>
        <div class="image-right1">

          <div class="imag=e-right1-1">
            <span class="express1">发货</span>
            <span class="express2">支付成功后48小时内发货</span>
          </div>
          <div class="image-right1-2">
            <span class="express1">晒单</span>
            <span class="express2">优质好评返20元红包 </span>
          </div>
        </div>
        <div class="time-flex-container">
          <div class="time-flex-item-image1"><img src="../../assets/images/time1.png" width="20px" height="20px"></div>
          <div class="time-flex-item">7天无理由退货</div>
          <div class="time-flex-item-image2"><img src="../../assets/images/sofa.png" width="20px" height="20px"></div>
          <div class="time-flex-item1">安全支付</div>
          <div class="time-flex-item-image2"><img src="../../assets/images/Alipay.png" width="20px" height="20px"></div>
          <div class="time-flex-item1">花呗分期</div>
        </div>
        <div class="flex-container-color">
          <p>颜色</p>
          <div class="flex-item-color">
            <input type="radio">
            <span>海岛灰</span>
          </div>
        </div>
        <p>版本</p>
        <div class="flex-container-i5">
          <div class="flex-item-i5">
                <span><input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked=""><label for="radio-1-1"></label> i5 16G+512G
                </span>
          </div>
          <div class="flex-item-i5">
                <span><input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" checked=""><label for="radio-1-1"></label>i5 8G+512G
                </span>
          </div>
        </div>
        <p>数量</p>
        <div class="goods">
          <div class="flex-container-goods">
            <div class="flex-item-goods">-</div>
            <div class="flex-item-goods">1</div>
            <div class="flex-item-goods">+</div>
          </div>
        </div>
        <div class="info">
          <div class="info-left">
            <span>花呗分期</span>
            <img src="images/Alipay1.png" alt="">
            <span style="color:red">该商品最高可享12期分期免息</span>
          </div>
          <br>
          <div class="right" style="color: #b0b0b0">什么是花呗分期?</div>
        </div>
        <div class="pay-bd">
          <div class="pay-bd-item">
            <p>¥1433.66×3</p>
            <p style="color: #e30a0a">免手续费</p>
          </div>
          <div class="pay-bd-item">
            <p>¥733.16×6</p>
            <p style="color: #e30a0a">免手续费</p>
          </div>
          <div class="pay-bd-item">
            <p>¥366.58×12</p>
            <p style="color: #e30a0a">免手续费</p>
          </div>
        </div>
        <div class="all">
          <div class="all1">
            <div class="info" >
              <div class="info-left">
                <span style="font-size: 24px">海岛灰 i5 8G+512G</span>
              </div>
              <div class="right"   style="font-size: 20px">x1</div>
            </div>
            <div class="info" >
              <div class="info-left">
                <span style="font-size: 28px">总计：</span>
              </div>
              <div class="right" style="color: #e30a0a"><h1>¥4399</h1></div>
            </div>

            <div class="flex-container-car" >
              <div class="flex-item-car" ><button type="button" class="btn btn-default btn-lg ">加入购物车</button></div>
              <div class="flex-item-car" ><button type="button" class="btn btn-default btn-lg " style="background-color: gold"> 立即购买</button></div>
            </div>
          </div>



        </div>
      </div>


    </div>

  </div>
</template>

<script>
export default {
  name: "newflex",
  data(){
    return{
      banH:650,
      list_img:[
        { url: require('../../assets/images/realmeBook.png') },
        { url: require('../../assets/images/image1.1.png') },
        { url: require('../../assets/images/image1.2.png') },
        { url: require('../../assets/images/image1.3.png') },
      ]
    }
  },methods:{
    setbanH(){
      this.banH=500
    }
  },
  mounted() {

    this.setbanH()

    window.addEventListener('resize', () => {

      this.setbanH()

    }, false)
  },
}
</script>


<style scoped>

.banner {
  margin: 0 auto;
  width: 560px;
  height:560px;
}
.el-carousel__item>h3 {
  color: #475669;
  width: 650px;
  height: 650px;
  font-size: 18px;
  opacity: 0.75;

  margin: 0;
}
.el-carousel__item>h3>img{
  width: 560px;
  height: 560px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
<style src="../../assets/CSS/Main.css"></style>
<style src="../../assets/CSS/Details.css"></style>